<template>
	<view class="template-about">
		<view class="top-backgroup">
			<image src="https://mp-9d4971a7-0aed-45cf-be1a-8cf593aba55e.cdn.bspapp.com/system-static/my-bg.png" mode="widthFix" class="backgroud-image"></image>
		</view>
		<button @tap="changeTabbarPage(0)">
			<view class="dong">
				<view class="monster">
					<view class="monster__face">
						<view class="monster__eye avatar-eye avatar-eye--green eye--left">
							<view class="avatar-eye-pupil pupil--green">
								<span class="avatar-eye-pupil-blackThing">
									<span class="avatar-eye-pupil-lightReflection"></span>
								</span>
							</view>
						</view>
						<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
							<view class="avatar-eye-pupil pupil--pink">
								<span class="avatar-eye-pupil-blackThing">
									<span class="avatar-eye-pupil-lightReflection"></span>
								</span>
							</view>
						</view>
						<view class="monster__noses">
							<view class="monster__nose"></view>
							<view class="monster__nose"></view>
						</view>
						<view class="monster__mouth">
							<view class="monster__top"></view>
							<view class="monster__bottom"></view>
						</view>
					</view>
				</view>
			</view>
		</button>
		<!-- 我的 -->
		<view class="about__wrap">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left" @tap="toPageName('userInfo')">
						<!-- 图标logo -->
						<view class="logo-pic tn-shadow">
							<view class="logo-image">
								<image
									class="tn-shadow-blur avatar-image"
									:src="avatarUrl"
									mode="aspectFill"
									style="width: 120rpx; height: 120rpx; border-radius: 50%"
									@error="onAvatarError"></image>
							</view>
						</view>
						<view class="tn-padding-right tn-color-white">
							<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
								{{ nickname }}
							</view>
							<view v-if="hasLogin" class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">欢迎您</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 盒子 -->
			<view class="tn-flex tn-padding-top-xl" style="margin-top: -20rpx">
				<view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0" @tap="changeTabbarPage(1)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
							<view style="width: 50rpx; height: 90rpx" class="icon__item--icon7 tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16">
								<view class="tn-icon-data-fill" style="z-index: 999"></view>
							</view>
						</view>
						<view class="tn-text-center">
							<view class="tn-text-ellipsis tn-color-gray--dark">可视化</view>
						</view>
					</view>
				</view>
				<view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0" @tap="changeTabbarPage(2)">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
							<view style="width: 90rpx; height: 90rpx" class="icon__item--icon6 tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-15">
								<view class="tn-icon-message-fill" style="z-index: 999"></view>
							</view>
						</view>
						<view class="tn-text-center">
							<view class="tn-text-ellipsis tn-color-gray--dark">消息</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 更多信息-->
			<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
							<view class="tn-icon-like-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">技术栈</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
							<view class="tn-icon-around"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
						<view class="tn-margin-left-sm tn-color-gray">0.0.6(Beta)</view>
					</view>
				</tn-list-cell>
			</view>

			<!-- 更多信息-->
			<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-4 tn-color-white">
							<view class="tn-icon-set"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">设置</view>
						<view class="tn-margin-left-sm tn-color-purple tn-icon-set-fill"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-13 tn-color-white">
							<view class="tn-icon-clear"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">清空缓存</view>
						<view class="tn-margin-left-sm tn-color-cyan tn-icon-clear-fill"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
							<view class="tn-icon-message-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
						<view class="tn-margin-left-sm tn-color-blue tn-icon-edit-write-fill"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @tap="copyPhone()">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
							<view class="tn-icon-phone-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
						<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round tn-icon-copy-fill">
							173****1270
						</view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" v-if="hasLogin" @tap="logout()">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
							<view class="tn-icon-logout"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">退出登录</view>
					</view>
				</tn-list-cell>
			</view>
		</view>
	</view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import NavIndexButton from "@/libs/components/nav-index-button.vue";
import util_mixin from "@/libs/mixin/util_mixin";
import { store, mutations } from "@/uni_modules/uni-id-pages/common/store.js";
const uniIdCo = uniCloud.importObject("uni-id-co");
export default {
	name: "my",
	mixins: [template_page_mixin, util_mixin],
	components: {
		NavIndexButton,
	},
	data() {
		return {};
	},
	computed: {
		hasLogin() {
			return store.hasLogin;
		},
		userInfo() {
			return store.userInfo;
		},
		avatar_file() {
			return store.userInfo.avatar_file || {};
		},
		/**
		 * 获取头像URL，确保退出登录后能正确显示默认头像
		 * 小程序中需要特别处理静态资源路径
		 */
		avatarUrl() {
			if (this.avatar_file?.url) {
				return this.avatar_file.url;
			}
			// 小程序中使用绝对路径引用静态资源
			return "/static/images/my/avatar-default.png";
		},
		nickname() {
			return this.hasLogin ? this.userInfo.nickname || "无昵称" : "未登录";
		},
	},
	methods: {
		// 复制联系电话
		copyPhone() {
			uni.setClipboardData({
				data: "17300001270",
				success: function () {
					console.log("复制成功！");
				},
			});
		},
		/**
		 * 退出登录
		 * 确保清除所有用户数据并正确更新UI状态
		 */
		async logout() {
			try {
				await uniIdCo.logout();
			} catch (error) {
				console.error("服务端退出登录失败:", error);
			}

			// 清除所有本地存储数据
			uni.clearStorageSync();

			// 清除用户状态，这会触发Vue响应式更新
			mutations.logout();

			// 可选：跳转到首页
			// uni.redirectTo({
			//   url: "/pages/index/index",
			// });
		},
		// 切换界面
		changeTabbarPage(index) {
			this.$emit("changeTabbarPage", index);
		},
	},
};
</script>

<style lang="scss" scoped>
@import "@/static/css/templatePage/custom_nav_bar.scss";

.template-about {
}

/* 顶部背景图 start */
.top-backgroup {
	height: 450rpx;
	z-index: -1;

	.backgroud-image {
		width: 100%;
		height: 450rpx;
		// z-index: -1;
	}
}

/* 顶部背景图 end */

/* 用户头像 start */
.logo-image {
	width: 120rpx;
	height: 120rpx;
	position: relative;
	background-color: #ffffff;
	border-radius: 50%;
	overflow: hidden;
}

.logo-pic {
	background-size: cover;
	background-repeat: no-repeat;
	// background-attachment: fixed;
	background-position: top;
	border-radius: 50%;
	overflow: hidden;
}

/* 头像图片样式 */
.avatar-image {
	width: 120rpx !important;
	height: 120rpx !important;
	border-radius: 50% !important;
	object-fit: cover;
}

/* 页面 start*/
.about-shadow {
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.about {
	&__wrap {
		position: relative;
		z-index: 1;
		margin: 20rpx 30rpx;
		margin-top: -230rpx;
	}
}

/* 页面 end*/

.my-shadow {
	box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
	border-radius: 20rpx;
}

/* 图标容器7 start */
.icon7 {
	&__item {
		width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 10rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 0;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;
		}
	}
}

/* 图标容器1 start */
.icon1 {
	&__item {
		// width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 40rpx;
			height: 40rpx;
			font-size: 28rpx;
			border-radius: 50%;
			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				// background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
			}
		}
	}
}

/* 图标容器1 end */

/* 大嘴鸟*/
.dong {
	z-index: 9999;
	position: fixed;
	top: -40px;
	right: -80px;
	transform: scale(0.24);
	-webkit-transform: scale(0.24);
	-moz-transform: scale(0.24);
}

.monster {
	transform: rotate(-50deg);
	-ms-transform: rotate(-50deg);
	/* IE 9 */
	-moz-transform: rotate(-50deg);
	/* Firefox */
	-webkit-transform: rotate(-50deg);
	/* Safari 和 Chrome */
	-o-transform: rotate(-50deg);
	/* Opera */
	display: flex;
	justify-content: center;
	position: relative;
	width: 170px;
	height: 400px;
	border-top-left-radius: 200px;
	border-top-right-radius: 200px;
	background-color: #3c47d7;
	box-shadow: 20px 20px 60px #4650e5;
}

.monster__face {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: absolute;
	top: 14%;
	width: 75%;
	height: 160px;
}

.monster__noses {
	top: 50%;
	display: flex;
	justify-content: space-between;
	width: 28%;
	height: auto;
	margin-bottom: 10px;
}

.monster__nose {
	width: 8px;
	height: 12px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}

.monster__mouth {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 0%;
	overflow: hidden;
	border: 25px solid #ffc333;
	border-radius: 100px;
	background-color: #810332;
	animation: mouth 1.75s infinite;
	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.monster__mouth::before {
	content: "";
	position: absolute;
	width: 150px;
	height: 80px;
	border-radius: 100px;
	background-color: #400018;
}

.monster__mouth::after {
	content: "";
	position: absolute;
	bottom: -80px;
	width: 160px;
	height: 80px;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	background-color: #dc1b50;
	animation: tongue 1.75s infinite;
}

.monster__top {
	position: absolute;
	top: -30px;
	width: 170px;
	height: 30px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #ffffff;
	z-index: 100;
	animation: t 1.75s infinite;
}

.monster__bottom {
	position: absolute;
	bottom: 0;
	width: 100px;
	height: 30px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #ffffff;
	z-index: 100;
	animation: b 1.75s infinite;
}

.avatar-eye {
	position: absolute;
	top: -10%;
	width: 65px;
	height: 65px;
	background: linear-gradient(105deg, white, #cb87f4);
	border-radius: 100%;
	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
	margin: 3px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.avatar-eye--green {
	background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}

.avatar-eye--violet {
	background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}

.eye--left {
	left: 10%;
}

.eye--right {
	left: 85%;
}

.eye--center {
	left: 45%;
	top: 10%;
}

.avatar-eye-pupil {
	position: absolute;
	width: 55%;
	height: 55%;
	left: 50%;
	top: 25%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	z-index: 100;
	border-radius: 100%;
}

.pupil--green {
	background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}

.pupil--pink {
	background: linear-gradient(135deg, #f1a183, #8535cd);
}

.avatar-eye-pupil-blackThing {
	position: absolute;
	width: 55%;
	height: 55%;
	left: 50%;
	top: 25%;
	background: #2c2f32;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	border-radius: 100%;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.avatar-eye-pupil-lightReflection {
	position: absolute;
	width: 7px;
	height: 7px;
	left: 25%;
	top: 10%;
	background: #ebebeb;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	border-radius: 100%;
	box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}

/**/
@keyframes t {
	0%,
	10%,
	80%,
	100% {
		top: -30px;
	}

	20% {
		top: 0px;
	}

	30% {
		top: -20px;
	}

	40% {
		top: -0px;
	}

	50% {
		top: -25px;
	}

	70% {
		top: 0px;
	}
}

@keyframes b {
	0%,
	10%,
	80%,
	100% {
		bottom: -30px;
	}

	20% {
		bottom: 0px;
	}

	30% {
		bottom: -20px;
	}

	40% {
		bottom: -0px;
	}

	50% {
		bottom: -25px;
	}

	70% {
		bottom: 0px;
	}
}

@keyframes mouth {
	0%,
	10%,
	100% {
		width: 100%;
		height: 0%;
	}

	15% {
		width: 90%;
		height: 30%;
	}

	20% {
		width: 50%;
		height: 70%;
	}

	25% {
		width: 70%;
		height: 70%;
	}

	30% {
		width: 80%;
		height: 60%;
	}

	35% {
		width: 60%;
		height: 70%;
	}

	40% {
		width: 55%;
		height: 75%;
	}

	45% {
		width: 50%;
		height: 90%;
	}

	50% {
		width: 40%;
		height: 70%;
	}

	55% {
		width: 70%;
		height: 95%;
	}

	60% {
		width: 40%;
		height: 50%;
	}

	65% {
		width: 100%;
		height: 60%;
	}

	70% {
		width: 100%;
		height: 70%;
	}

	75% {
		width: 90%;
		height: 70%;
	}

	80% {
		width: 50%;
		height: 70%;
	}

	85% {
		width: 90%;
		height: 50%;
	}

	85% {
		width: 40%;
		height: 70%;
	}

	90% {
		width: 90%;
		height: 30%;
	}

	95% {
		width: 100%;
		height: 10%;
	}
}

@keyframes tongue {
	0%,
	20%,
	100% {
		bottom: -80px;
	}

	30%,
	90% {
		bottom: -40px;
	}

	40% {
		bottom: -45px;
	}

	50% {
		bottom: -50px;
	}

	70% {
		bottom: -80px;
	}

	90% {
		bottom: -40px;
	}
}
</style>
